<template>
  <a-modal
    :maskClosable="false"
    :keyboard="false"
    :title="title"
    :width="width"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :cancelText="$t('m.common.button.close')">
    <a-spin :spinning="spinning != 0">
    <a-form :form="form"
            layout="horizontal"
            :hideRequiredMark="false"
            style="">
      <a-row class="grid-row">
        <a-col v-bind="colLayout2.cols" class="grid-col">
          <a-form-item :label="$t('m.bpm.entity.handover_fromUser')" :label-col="colLayout2.labelCol" :wrapper-col="colLayout2.wrapperCol">
            <ych-select-user
              :disabled="disabledRules.fromUser"
              :placeholder="$t('m.bpm.verify.tip_handover_fromUser')"
              :multi="false"
              v-decorator="['fromUser', validatorRules.fromUser]"
              @change="changeFromUser"
            />
          </a-form-item>
        </a-col>
        <a-col v-bind="colLayout2.cols" class="grid-col">
          <a-form-item :label="$t('m.bpm.entity.handover_toUser')" :label-col="colLayout2.labelCol" :wrapper-col="colLayout2.wrapperCol">
            <ych-select-user
              :disabled="disabledRules.toUser"
              :placeholder="$t('m.bpm.verify.tip_handover_toUser')"
              :multi="false"
              v-decorator="['toUser', validatorRules.toUser]"
              @setSelectedRows="setToUser"
            />
          </a-form-item>
        </a-col>
        <a-col v-bind="colLayout2.cols" class="grid-col">
          <a-form-item :label="$t('m.bpm.entity.handover_notice')" :label-col="colLayout2.labelCol" :wrapper-col="colLayout2.wrapperCol">
            <dict-select-tag
              type="checkbox"
              :options="noticeOptions"
              :disabled="disabledRules.notice"
              v-decorator="['notice', validatorRules.notice]"
                    />
          </a-form-item>
        </a-col>
        <a-col v-bind="colLayout2.fixed.cols" class="grid-col">
          <a-form-item :label="$t('m.bpm.entity.handover_type')" :label-col="colLayout2.fixed.labelCol" :wrapper-col="colLayout2.fixed.wrapperCol">
            <a-radio-group @change="changeType" v-decorator="['type',validatorRules.type]" button-style="solid">
              <a-radio-button value="all">{{$t('m.bpm.entity.handover_type_all')}}</a-radio-button>
              <a-radio-button value="task">{{$t('m.bpm.entity.handover_type_task')}}</a-radio-button>
            </a-radio-group>
          </a-form-item>
        </a-col>

      </a-row>

    </a-form>
    <BpmHandoverTaskList v-if="showTask" ref="bpmHandoverTaskList" :userId="formUserId" @setSelectedRowKeys="setSelectedRowKeys"></BpmHandoverTaskList>
    <template slot="footer">
      <a-button type="primary" @click="handleOk">{{ $t('m.common.button.ok') }}</a-button>
      <a-button key="close" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
    </template>
    </a-spin>
  </a-modal>
</template>

<script>

  import { putAction} from '@/api/manage'
  import YchConstant from "@/api/YchConstant";
  import {GardLayoutMixin} from '@/mixins/GardLayoutMixin'
  import YchSelectUser from '../../../components/ych/ych-user/YchSelectUser'
  import BpmHandoverTaskList from './BpmHandoverTaskList'
  import DictSelectTag from '../../eform/select/tag/DictSelectTag'

  export default {
    name: "BpmHandover",
    mixins: [GardLayoutMixin],
    components: {
      YchSelectUser,
      BpmHandoverTaskList,
      DictSelectTag
    },
    data() {
      return {
        visible: false,
        form: this.$form.createForm(this),
        model: {},
        spinning: 0,//遮罩
        width:'900px',
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
        showTask:false,
        formUserId:"",
        toUserIdAndDeptId:"",
        taskIdList:[],
        title:this.$t('m.bpm.entity.Workhandover'),
        validatorRules: {
          fromUser: {
            rules: [{"required": true, "message": this.$t('m.bpm.verify.tip_handover_fromUser')}]
          },
          toUser: {
            rules: [{"required": true, "message": this.$t('m.bpm.verify.tip_handover_toUser')}]
          },
          type: {
            initialValue:"all",
            rules: [{"required": true, "message": this.$t('m.bpm.verify.tip_handover_type')}]
          },
          notice: {
            rules: [{"required": false}]
          },
        },
        disabledRules: {
          fromUser:false,
          toUser:false,
          type:false,
          notice:false
        },
        url: {
          handoverWorkUrl:YchConstant.PREFIX_BPM+"/bpm-front/operateRest/handoverWork/v1",
        },
        noticeOptions:[
          {
            "value": "email",
            "label": this.$t('m.system.message.other.esType_option2')
          },
          {
            "value": "phone",
            "label": this.$t('m.system.message.other.esType_option1')
          },
        ]
      }
    },
    created() {
      this.showTask = false
    },
    methods: {
      setSelectedRowKeys(taskIdList){
        this.taskIdList = taskIdList
      },
      changeFromUser(fromUser){
        this.formUserId = fromUser
      },
      setToUser(selectedUser){
        if(selectedUser && selectedUser.length>0){
          this.toUserIdAndDeptId = selectedUser[0].id+"#"+selectedUser[0].orgId
        }
      },
      open(){
        this.formUserId = ""
        this.showTask = false
        this.visible = true
      },
      changeType(obj){
        let type = obj.target.value
        if(type=='all'){
          this.showTask = false
          this.formUserId = ""
        }else if(type=='task'){
          let fromUser = this.form.getFieldValue('fromUser');
          if(fromUser){
            this.formUserId = fromUser
            this.showTask = true
          }else{
            this.showTask = false
            this.messageUtil.warning(this.$t('m.bpm.verify.tip_handover_fromUser_first'));
            this.$nextTick(() => {
              this.form.setFieldsValue({type:'all'})
            })
          }
        }
      },
      handleOk(){
        // 触发表单验证
        this.form.validateFields(async (err, values) => {
          if (!err) {
            if(values["fromUser"]==values["toUser"]){
              this.messageUtil.warning(this.$t('m.bpm.verify.tip_handover_fromUser_eq_toUser'));
              return;
            }
            if(values["type"]=="task"){
              if (this.taskIdList.length <= 0) {
                this.messageUtil.warning(this.$t('m.bpm.verify.tip_handover_select_task'));
                return;
              }
              values["taskIds"]=this.taskIdList.join(",")
            }
            values["toUser"]=this.toUserIdAndDeptId
            this.spinning++
            putAction(this.url.handoverWorkUrl,values).then(res=>{
              if(res.success){
                this.messageUtil.success(res.message)
                this.handleCancel()
              }else{
                this.messageUtil.warning(res.message)
              }
            }).finally(() => {
              this.spinning--
            });
          }
        })
      },
      handleCancel() {
        this.visible = false;
      },
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .ant-modal-body {
    padding: 5px 24px 5px 24px !important;
  }
</style>
